import { useState } from "react";
import styles from "./index.module.css";
import {
  DoubleRightOutlined,
  DeleteOutlined,
  BorderInnerOutlined,
} from "@ant-design/icons";
import areaSvg from "@/assets/area.svg";
import distanceSvg from "@/assets/distance.svg";
import bufferSvg from "@/assets/buffer.svg";
import routeSvg from "@/assets/route.svg";
import pointSvg from "@/assets/point.svg";
import {
  Button,
  Modal,
  Form,
  Input,
  InputNumber,
  Space,
  message,
  Tooltip,
} from "antd";
import { addPoint, clearPoint, mapPoint } from "@/api/addPoint";
import { disMeasure, areaMeasure } from "@/api/measure";
import { routeAnalyse } from "@/api/route";
import { buffer } from "@/api/buffer";
import { addGrid, clearGrid } from "@/api/addGrid";
import { mapView } from "@/api/map";

export default function Sidebar() {
  const [isModelOpen, setIsModelOpen] = useState(false);
  const [bufferDis, setBufferDis] = useState(1000);
  //展示缓冲区分析框
  const showModel = () => {
    setIsModelOpen(true);
  };
  //选取点
  const selectPoint = () => {
    //改变鼠标状态
    document.body.style.cursor = "crosshair";
    addPoint();
  };
  const clearFeatures = () => {
    //恢复鼠标状态
    document.body.style.cursor = "default";
    clearPoint();
    //清空网格线
    clearGrid();
  };
  //获取输入缓冲区的值
  const onChange = (value: any) => {
    setBufferDis(value);
  };
  //缓冲区分析
  const handleOk = () => {
    if (mapPoint) {
      setIsModelOpen(false);
      document.body.style.cursor = "default";
      //缓冲区分析
      buffer(bufferDis);
    } else {
      message.warning("请先选取点！");
    }
  };
  const handleCancel = () => {
    setIsModelOpen(false);
  };
  //测量距离
  const measureDis = () => {
    clearPoint();
    disMeasure();
  };
  //测量面积
  const measureArea = () => {
    clearPoint();
    areaMeasure();
  };
  //路线规划
  const routing = () => {
    clearPoint();
    routeAnalyse();
  };
  //添加网格
  const addMapGrid = () => {
    mapView.when(() => {
      addGrid(100000,0);
    });
  };

  return (
    <div className={styles.sidebar}>
      <div className={styles.left}>
        <div className={styles.functionBox}>
          <Tooltip title="在地图中选取点位" placement="right">
            <Button type="primary" className={styles.btn} onClick={selectPoint}>
              <img className={styles.img} src={pointSvg} alt="" />
              选取点
            </Button>
          </Tooltip>
        </div>
        <div className={styles.functionBox}>
          <Tooltip title="根据点位生成缓冲区" placement="right">
            <Button type="primary" className={styles.btn} onClick={showModel}>
              <img className={styles.img} src={bufferSvg} alt="" />
              缓冲区
            </Button>
          </Tooltip>
          <Modal
            title="缓冲区参数设置"
            open={isModelOpen}
            onOk={handleOk}
            onCancel={handleCancel}
          >
            <Space
              direction="vertical"
              size="middle"
              style={{ display: "flex" }}
            >
              <Form>
                <Form.Item label="缓冲区区域" style={{ marginTop: 20 }}>
                  <Input
                    placeholder="石家庄市区"
                    disabled
                    style={{ maxWidth: 200 }}
                  />
                </Form.Item>
                <Form.Item label="缓冲区距离">
                  <InputNumber
                    min={1}
                    defaultValue={3000}
                    onChange={onChange}
                    style={{ width: 200 }}
                  />{" "}
                  米
                </Form.Item>
              </Form>
            </Space>
          </Modal>
        </div>
        <div className={styles.functionBox}>
          <Tooltip title="测量距离工具" placement="right">
            <Button type="primary" className={styles.btn} onClick={measureDis}>
              <img className={styles.img} src={distanceSvg} alt="" />
              测距离
            </Button>
          </Tooltip>
        </div>
        <div className={styles.functionBox}>
          <Tooltip title="测量面积工具" placement="right">
            <Button type="primary" className={styles.btn} onClick={measureArea}>
              <img className={styles.img} src={areaSvg} alt="" />
              测面积
            </Button>
          </Tooltip>
        </div>
        <div className={styles.functionBox}>
          <Tooltip title="路线规划工具" placement="right">
            <Button type="primary" className={styles.btn} onClick={routing}>
              <img className={styles.img} src={routeSvg} alt="" />
              路线规划
            </Button>
          </Tooltip>
        </div>
        <div className={styles.functionBox}>
          <Tooltip title="添加网格线" placement="right">
            <Button type="primary" className={styles.btn} onClick={addMapGrid}>
              <BorderInnerOutlined />
              添加网格
            </Button>
          </Tooltip>
        </div>
        <div className={styles.functionBox}>
          <Tooltip title="清空要素" placement="right">
            <Button danger className={styles.btn} onClick={clearFeatures}>
              <DeleteOutlined />
              清除
            </Button>
          </Tooltip>
        </div>
      </div>
      {/*展开图标*/}
      <div className={styles.right}>
        <div className={styles.icon}>
          <DoubleRightOutlined />
        </div>
      </div>
    </div>
  );
}
